<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/item.css"/>
    <script src="${pageContext.request.contextPath}/static/item.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        function deleteItem(goodsId, trIndex) {
            var flag = confirm("你确定要删除吗？");
            if(flag) {
                $.ajax({
                    url: '${pageContext.request.contextPath}/carts/delete',
                    data: {
                        goodsId: goodsId
                    },
                    success: function (data) {
                        if(data.status === "success") {
                            $("#cart_quantity").html(data.data);//
                            $('table tr:eq('+(trIndex+1)+')').remove();
                        }
                    }
                });
            }
        }

        //修改商品数量
        function changeQuantity(goodsId, option) {
            var quantity = $("#item"+goodsId).val();
            if("+" === option) {
                quantity++;
            } else {
                if(quantity <= 1) {
                    return false;
                }
                quantity--;
            }

            $.ajax({
                url: '${pageContext.request.contextPath}/carts/update',
                data: {
                    goodsId: goodsId,
                    quantity: quantity
                },
                success: function (data) {
                    if(data.status === "success") {
                        $("#item"+goodsId).val(quantity);
                        $("#item_amount"+goodsId).html(data.data.amount);
                    }
                }
            });
        }
    </script>
</head>
<body>
<div class="header">
    <div class="w1000">
        <ul class="nav-left">
            <li>
                <div class="logo">
                    中国大陆
                </div>
            </li>
            <li>deng1259070</li>
            <li><a href="#">手机逛淘宝</a></li>
        </ul>
        <ul class="nav-right">
            <li><a href="${pageContext.request.contextPath}/foods">淘宝网首页</a></li>
            <li>
                <a href="${pageContext.request.contextPath}/carts/getCarts">
                购物车<span id="cart_quantity" style="color:red;font-weight: 700;margin:0 2px;">${fn:length(carts)}</span>
                </a>
            </li>
            <li><a href="#">联系客服</a></li>
        </ul>
    </div>
</div>
<div class="category w1000">
    <ul>
        <li><a href="#" class="category-active">全部商品<span class="number"></span><span class="pipe"></span></a></li>
        <li><a href="#">降价商品<span class="number"></span><span class="pipe"></span></a></li>
        <li><a href="#">库存紧张<span class="number"></span></a></li>
    </ul>
</div>
<div class="cart w1000">
    <table class="cart-table" border="1px">
        <tr>
            <th><input type="checkbox" />全选</th>
            <th>商品图片</th>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>金额</th>
            <th>操作</th>
        </tr>
        <c:forEach items="${carts}" var="entry" varStatus="v">
            <tr>
                <c:set var="item" value="${entry.value}" />
                <td width="50px"><input type="checkbox" value="${item.id}" /></td>
                <td>
                    <img src="${pageContext.request.contextPath}/static/${item.icon}" width="100px" />
                </td>
                <td>${item.name}</td>
                <td style="font-weight: 700;">￥${item.price}</td>
                <td width="170px">
                    <div style="width:122px; margin: 0 auto;">
                        <div class="goods-item-buy">
                            <a href="javascript:void(0);" onclick="changeQuantity(${item.id},'-')">-</a>
                            <input type="text" id="item${item.id}" value="${item.quantity}" onkeyup="value=value.replace(/\D/g,'')" class="num" />
                            <a href="javascript:void(0);" onclick="changeQuantity(${item.id},'+')">+</a>
                        </div>
                    </div>
                </td>
                <td style="font-weight: 700;color:red;">
                    ￥<span id="item_amount${item.id}">${item.amount}</span>
                </td>
                <td><a href="javascript:void(0)" onclick="deleteItem(${item.id}, ${v.index})">删除</a></td>
            </tr>
        </c:forEach>
    </table>
</div>

</body>
</html>
